<template>
  <el-dialog
      v-if='visible'
      title="富文本"
      :visible.sync="visible"
      :with-header="false"
      :append-to-body="true"
      custom-class="layer_wrap form_edit_wrap"
      :before-close="()=>handleClose()"
  >
    <div class="layer_inside">
      <div class="layer_header">
        <span class="title">资源</span>
        <i class="el-icon-close" @click="()=>handleClose()"/>
      </div>
      <div class="layer_main_wrap">
        <!--视频资源-->
        <div class="flex-box">
          <div class="flex-box-left">
            <ResourceInfo :info="info" @backContent="backContent" />
          </div>
          <div class="flex-box-right">
            <div class="item-wrap header-area">
              <div class="item name">素材名称</div>
              <div class="item">大小</div>
              <div class="item operator">操作</div>
            </div>
            <div class="list-area">
              <Draggable
                  class="list-group"
                  :list="tempContent"
                  :animation="100"
              >
                <template v-for="(item,index) in tempContent">
                  <div class="item-wrap">
                    <div class="item name">{{ item.name }}</div>
                    <div class="item">{{ fileSizeChange(item.size) }}</div>
                    <div class="item operator-box">
                      <div class="operator-item">
                        <i class="el-icon-delete" @click.prevent="handleDelete(item,index)"></i>
                      </div>
                      <div class="operator-item">
                        <i class="el-icon-thumb"></i>
                      </div>
                    </div>
                  </div>
                </template>
              </Draggable>
            </div>
          </div>
        </div>
        <!--按钮-->
        <div class="layer_delete_bottom">
          <el-button class="button_item cancel" @click="()=>handleClose()">取消</el-button>
          <el-button class="button_item sure" type="primary" @click="()=>handleSure()">确认</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Draggable from "vuedraggable"
import {fileSizeChange} from "@/utils/common";
import ResourceInfo from "@c/public/layer/template/resourceInfo";

export default {
  name: 'UpdatePicture',

  props: ["visible", 'info'],

  components: {
    Draggable,
    ResourceInfo,
  },

  data() {
    return {
      content: null,
      tempContent: null,
    }
  },

  async mounted() {},

  methods: {
    fileSizeChange,

    // 接收回传的内容
    backContent(val){
      let mergerInfo = Array();
      let {multiple = true} = (this.info)
      if(multiple){
        mergerInfo = this.$lodash.isNull(this.tempContent)? val: [...this.tempContent, ...val]
      }else {
        mergerInfo = [...val]
      }
      this.tempContent = [...mergerInfo]
    },

    // 关闭弹层
    handleClose(){
      this.$emit('handleCancel')
    },

    // 点击确定
    handleSure(){
      const self = this;
      let info = (self.info)
      if ((self.tempContent)) {
        let params = Object();
        Reflect.set(params,'key',(info['updataType']));
        Reflect.set(params,'val',(self.tempContent));
        self.$emit('handleSure',params);
        self.handleClose();
      } else {
        self.$message({
          message: '请先选择视频或图片',
          type: "warning"
        })
      }
    },

    // 移除操作
    handleDelete(row,key) {
      this.tempContent = this.tempContent.filter((item, index) => {
        return index !== key
      });
    }
  },

  watch: {
    // 写入文本域内容
    info:{
      handler: async function (val) {
        if (!!val&&!(this.$lodash.isEmpty(val))) {
          this.content = (val.content);
          this.tempContent = (val.content) || null
        }
      },
      deep: true,
      immediate: true,
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/assets/style/layer";
@import "assets/style";
</style>